<template>
	<view class="header-section">
			<view class="header-container">
				<!-- 左侧区域：切换按钮和工种信息 -->
				<view class="left-section">
					<!-- 未登录状态：只显示登录按钮 -->
					<view v-if="!loading && (!userinfo.courses || userinfo.courses.length === 0)" class="login-btn" @click="goToLogin">
						<text class="login-text">请登录</text>
						<view class="login-icon">
							<text class="iconfont icon-qiehuan"></text>
						</view>
					</view>
					
					<!-- 已登录且有多个工种：显示切换按钮 -->
					<view v-if="!loading && userinfo.courses && userinfo.courses.length > 1" class="opc-switch" @click="showOpcSelector">
						<text class="switch-text">切换工种</text>
						<view class="switch-icon">
							<text class="iconfont icon-xiangxia"></text>
						</view>
					</view>
					
					<!-- 已登录且只有一个工种：不显示切换按钮 -->
					<view v-if="!loading && userinfo.courses && userinfo.courses.length === 1" class="opc-info">
						<text class="opc-label">当前工种</text>
					</view>
					
					<!-- 加载状态 -->
					<view v-if="loading" class="loading-btn disabled">
						<text class="loading-text">加载中</text>
						<view class="loading-icon">
							<text class="iconfont icon-gengxin"></text>
						</view>
					</view>
				</view>
				
				<!-- 右侧区域：工种名称 -->
				<view class="right-section">
					<text class="opc-name" :class="{ 'no-opc': !opcData.opcname || opcData.opcname === '请选择工种' }">
						{{ loading ? '加载中...' : (opcData.opcname || '请登录') }}
					</text>
				</view>
			</view>
		</view>
</template>

<script>
export default {
	name: 'HeaderSection',
	props: {
		loading: {
			type: Boolean,
			default: false
		},
		userinfo: {
			type: Object,
			default: () => ({ courses: [] })
		},
		opcData: {
			type: Object,
			default: () => ({ opc: '', opcname: '' })
		}
	},
	data() {
		return {
			capsuleInfo: null // 胶囊按钮信息
		}
	},
	computed: {
		// 计算头部区域样式，设置状态栏高度和胶囊按钮对齐
		headerSectionStyle() {
			if (!this.capsuleInfo) return {}
			
			const systemInfo = uni.getSystemInfoSync()
			// 计算胶囊按钮顶部距离转换为rpx
			const capsuleTopRpx = (this.capsuleInfo.top * 750) / systemInfo.windowWidth
			
			return {
				paddingTop: `${Math.ceil(capsuleTopRpx)}rpx`
			}
		},
		// 计算头部容器样式，使其与胶囊按钮融为一体
		headerContainerStyle() {
			if (!this.capsuleInfo) return {}
			
			const systemInfo = uni.getSystemInfoSync()
			// 计算胶囊按钮位置信息转换为rpx
			const capsuleLeftRpx = (this.capsuleInfo.left * 750) / systemInfo.windowWidth
			const capsuleRightRpx = (this.capsuleInfo.right * 750) / systemInfo.windowWidth
			const capsuleHeightRpx = (this.capsuleInfo.height * 750) / systemInfo.windowWidth
			
			// 计算胶囊按钮的圆角（通常是高度的一半）
			const borderRadiusRpx = Math.ceil(capsuleHeightRpx / 2)
			
			return {
				// 定位到胶囊按钮左侧，形成无缝连接
				height: `${Math.ceil(capsuleHeightRpx)}rpx`, // 高度与胶囊按钮一致
				// 左侧保持圆角，右侧无圆角以便与胶囊按钮对接
				borderRadius: `${borderRadiusRpx}rpx`,
				// padding: `0 ${Math.ceil(capsuleHeightRpx * 0.35)}rpx`,
				lineHeight: `${Math.ceil(capsuleHeightRpx)}rpx`,
				margin: `0 ${this.capsuleInfo.marginLeft*2}rpx`,
				// 确保与胶囊按钮在同一层级
				zIndex: 999
			}
		},
		// 计算右侧区域样式，在融合布局中优化显示
		rightSectionStyle() {
			if (!this.capsuleInfo) return {}
			
			const systemInfo = uni.getSystemInfoSync()
			const capsuleHeightRpx = (this.capsuleInfo.height * 750) / systemInfo.windowWidth
			
			// 在融合布局中，右侧区域需要更紧凑
			return {
				maxWidth: '400rpx', // 固定最大宽度，确保不会过宽
				marginLeft: '15rpx' // 减少左边距，让布局更紧凑
			}
		}
	},
	mounted() {
		this.getCapsuleInfo()
	},
	methods: {
		// 获取胶囊按钮信息
		getCapsuleInfo() {
			try {
				const systemInfo = uni.getSystemInfoSync()
				console.log(systemInfo, '设备信息');
				
				const menuButtonInfo = uni.getMenuButtonBoundingClientRect()
				console.log(menuButtonInfo,'menuButtonInfo');
				
				this.capsuleInfo = {
					width: menuButtonInfo.width,
					height: menuButtonInfo.height,
					top: menuButtonInfo.top,
					right: menuButtonInfo.right,
					bottom: menuButtonInfo.bottom,
					left: menuButtonInfo.left,
					marginRight: systemInfo.screenWidth - menuButtonInfo.right,
					marginLeft:systemInfo.screenWidth - menuButtonInfo.right
				}
				console.log('胶囊按钮信息:', this.capsuleInfo)
			} catch (error) {
				console.error('获取胶囊按钮信息失败:', error)
			}
		},
		// 显示工种选择器
		showOpcSelector() {
			this.$emit('show-opc-selector')
		},
		// 跳转到登录页面
		goToLogin() {
			this.$emit('go-to-login')
		}
	}
}
</script>

<style lang="scss" scoped>
.header-section {
	// background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	padding: 20rpx 0;
	padding-top: calc(20rpx + var(--status-bar-height));
	position: relative;
	z-index: 10;
}

.header-container {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin: 0 35rpx;
	padding: 20rpx 30rpx;
	background: rgba(255, 255, 255, 0.95);
	border-radius: 20rpx;
	box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
}

.left-section {
	display: flex;
	align-items: center;
	flex-shrink: 0;
}

.right-section {
	display: flex;
	align-items: center;
	flex: 1;
	margin-left: 20rpx;
	justify-content: flex-start;
}

.opc-label {
	font-size: 28rpx;
	color: #666;
	margin-right: 10rpx;
	display: flex;
}

.opc-name {
	font-size: 30rpx;
	font-weight: bold;
	color: #333;
	max-width: 400rpx; /* 限制最大宽度，避免与胶囊按钮冲突 */
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	text-align: left;
	
	&.no-opc {
		color: #999;
		font-weight: normal;
	}
}

.opc-switch {
	display: flex;
	align-items: center;
	background: linear-gradient(135deg, #4D82F3 0%, #51C5F5 100%);
	padding: 15rpx 25rpx;
	border-radius: 25rpx;
	box-shadow: 0 2rpx 10rpx rgba(77, 130, 243, 0.3);
	transition: all 0.3s ease;
}

.opc-switch:active {
	transform: scale(0.95);
	box-shadow: 0 1rpx 5rpx rgba(77, 130, 243, 0.2);
}

.opc-switch.no-courses {
	background: linear-gradient(135deg, #FF6B6B 0%, #FF8E8E 100%);
	box-shadow: 0 2rpx 10rpx rgba(255, 107, 107, 0.3);
}

.opc-switch.disabled {
	opacity: 0.6;
	pointer-events: none;
}

/* 登录按钮样式 */
.login-btn {
	display: flex;
	align-items: center;
	background: linear-gradient(135deg, #FF6B6B 0%, #FF8E8E 100%);
	padding: 15rpx 25rpx;
	border-radius: 25rpx;
	box-shadow: 0 2rpx 10rpx rgba(255, 107, 107, 0.3);
	transition: all 0.3s ease;
}

.login-btn:active {
	transform: scale(0.95);
	box-shadow: 0 1rpx 5rpx rgba(255, 107, 107, 0.2);
}

.login-text {
	font-size: 26rpx;
	color: #fff;
	font-weight: 500;
	margin-right: 8rpx;
}

.login-icon {
	display: flex;
	align-items: center;
}

.login-icon .iconfont {
	font-size: 24rpx;
	color: #fff;
}

/* 工种信息样式 */
.opc-info {
	display: flex;
	align-items: center;
	padding: 15rpx 0;
}

.opc-info .opc-label {
	font-size: 28rpx;
	color: #666;
	font-weight: 500;
}

/* 加载按钮样式 */
.loading-btn {
	display: flex;
	align-items: center;
	background: linear-gradient(135deg, #999 0%, #BBB 100%);
	padding: 15rpx 25rpx;
	border-radius: 25rpx;
	opacity: 0.6;
	pointer-events: none;
}

.loading-text {
	font-size: 26rpx;
	color: #fff;
	font-weight: 500;
	margin-right: 8rpx;
}

.loading-icon {
	display: flex;
	align-items: center;
}

.loading-icon .iconfont {
	font-size: 24rpx;
	color: #fff;
	animation: rotate 1s linear infinite;
}

.switch-text {
	font-size: 26rpx;
	color: #fff;
	font-weight: 500;
	margin-right: 8rpx;
}

.switch-icon {
	display: flex;
	align-items: center;
}

.switch-icon .iconfont {
	font-size: 24rpx;
	color: #fff;
	
	&.icon-gengxin {
		animation: rotate 1s linear infinite;
	}
}

@keyframes rotate {
	from {
		transform: rotate(0deg);
	}
	to {
		transform: rotate(360deg);
	}
}
</style>